<template>
  <div :id="domId" style="height: 100%; width: 33%"></div>
</template>
<script>
export default {
  data() {
    return {
      capital: this.companyData,
    }
  },
  props: {
    domId: {
      type: String,
      default: 'echarts1',
    },
    companyData: {
      type: String,
      default: '0',
    },
    colorStops: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
  // watch: {
  //   capital: {
  //     handler: function (val, oldVal) {
  //       if (val !== oldVal) {
  //         this.showEcharts1()
  //       }
  //     },
  //     deep: true,
  //   },
  // },
  mounted() {
    this.showEcharts1()
  },
  created() {},
  methods: {
    showEcharts1() {
      let capital = parseFloat(this.capital)
      let myChart = this.$echarts.init(document.getElementById(this.domId))
      let option = {
        // backgroundColor: '#060f39',
        series: [
          {
            type: 'liquidFill',
            radius: '80%',
            center: ['50%', '50%'],
            data: [capital / 100], // data个数代表波浪数
            color: [
              {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: this.colorStops,
                globalCoord: false,
              },
            ],
            backgroundStyle: {
              borderWidth: 1,
              color: '#060f39',
            },
            label: {
              normal: {
                formatter: capital + '%',
                textStyle: {
                  fontSize: 16,
                  color: '#fff',
                },
              },
            },
            outline: {
              show: false,
            },
          },
          {
            type: 'pie',
            center: ['50%', '50%'],
            radius: ['80%', '81%'],
            hoverAnimation: false,
            data: [
              {
                name: '',
                value: 1,
                labelLine: {
                  show: false,
                },
                // let
                itemStyle: {
                  color: this.liquidColor,
                },
              },
            ],
          },
        ],
      }

      myChart.setOption(option)
    },
  },
}
</script>
